<template>
  <div>
    <el-tooltip effect="dark" :content="input" :disabled="isNullOrUndefinedOrEmpty(input)">
      <el-input ref="input" :placeholder="placeholder" v-model="input" v-on="$attrs" clearable :disabled="disabled">
        <template #append>
          <el-button :disabled="disabled" @click="open = true" icon="Edit"/>
        </template>
      </el-input>
    </el-tooltip>
    <el-dialog draggable v-model="open" :title="title" width="70%" destroy-on-close append-to-body :before-close="() => open = false">
      <InputTag v-model="input" :rows="10"></InputTag>
      <div style="margin-top: 10px;color: #888;font-size: 12px;">输入逗号、点、分号、顿号、句号、回车会自动拆分成多个字符串。</div>
      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" icon="check" @click="open = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {defineComponent} from 'vue'
import InputTag from "@/components/InputTag/index.vue";
import {isNullOrUndefinedOrEmpty} from "@/config/common";

export default defineComponent({
  name: "inputTagDialog",
  components: {InputTag},
  props: {
    modelValue: String,
    title: {
      type: String
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      input: '',
      open: false,
    }
  },
  watch: {
    modelValue: {
      handler: function (val, old) {
        if (val !== old) {
          this.input = this.modelValue
        }
      },
      immediate: true
    },
    input() {
      this.$emit('update:modelValue', this.input)
    }
  },
  methods: {
    isNullOrUndefinedOrEmpty,
  }
})
</script>
<style scoped lang="scss">
</style>
